<template>
	<div class="container">
		<!--<iframe id="classFrame" :src="classinfoSrc" width="100%" height=""></iframe>-->
		<div class="nav">
			<el-dropdown @command="handleCommand" clearable>
				<span class="el-dropdown-link">
    <span>班级：</span>{{ classname }}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item v-for="x in userlogin.classList" :command="x">{{ x.classname }}</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<span>日期：</span>
			<el-date-picker v-model="dateValue" type="daterange" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy 年 MM 月 dd 日" :editable="editable" :picker-options="pickerOptions" @change="chooseDate" size="small">
			</el-date-picker>
			<span @click="search"><i class="iconfont icon-search"></i></span>
		</div>
		<div class="content">
			<div v-for="x in classArr" class="outBox">
				<p>{{ x.day }}</p>
				<div v-for="item in x.list" class="inBox" :class="transSubject(item.coursename)" @click="chooseCourse(item)">
					<div class="_top">{{ item.timeon }}-{{ item.timeoff }}</div>
					<div class="_middle">
						<p v-if="classname=='全部班级'" :class="{twoP:classname=='全部班级'}">{{ item.classname }}</p>
						<p :class="{twoP:classname=='全部班级'}"><i class="iconfont icon-kemu"></i>{{ item.coursename }}</p>
					</div>
					<div class="_bottom">查看详情
					</div>
				</div>
			</div>
			<p v-if="classArr.length==0">您还没有上课记录</p>
		</div>
	</div>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import api from '../api'
	import { seriDate, getSeriDate } from '../util/util'
	export default {
		created() {
			this.INIT_STATE();
			console.log(this.userlogin)
			//			this.classinfoSrc='http://2.moveteacherl.applinzi.com/index.php/Manage/Index/indexinfo/schoolid/'+this.userlogin.schoolid+'/teacherid/'+this.userlogin.id
			this.classinfoSrc = 'http://ban.localhost.com:81/index.php/Manage/Index/indexinfo/schoolid/93/teacherid/4836/classid/0/min/20171201/max/20180110'
			//默认获取前5天数据
			 this.dayto = getSeriDate();
			 this.dayfrom = getSeriDate(5);
			this.getLessonReviews(0, 0);
		},
		data() {
			return {
				//				ban.localhost.com:81
				editable: false,
				classinfoSrc: '',
				dateValue: '',
				classname: '全部班级',
				classid: 0,
				dayfrom: '',
				dayto: '',
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				classArr: []
			}
		},
		computed: {
			...mapState(['userlogin'])
		},
		methods: {
			...mapMutations(['INIT_STATE']),
			chooseDate(x) {
				this.dayfrom = seriDate(x[0]);
				this.dayto = seriDate(x[1])
			},
			chooseCourse(item) {
				console.log(item)
				var timeoff=item.timeoff?item.timeoff:'未点击下课'
				this.$router.push({
					path: `/courseinfo/${item.timeon}/${timeoff}/${item.coursename}/${item.id}/4`
				})
			},
			handleCommand(x) {
				this.classname = x.classname;
				this.classid = x.classid;
				this.getLessonReviews(this.dayfrom, this.dayto);
			},
			search(){
				
				this.getLessonReviews(this.dayfrom, this.dayto);
			},
			getLessonReviews(dayfrom, dayto) {
				var that = this
				api.getLessonReviews({
					classid: this.classid,
					schoolid: this.userlogin.schoolid,
					teacherid: this.userlogin.uid,
					dayfrom: dayfrom,
					dayto: dayto
				}).then(response => {
					console.log(response.data.data)
					that.classArr = response.data.data
					if(that.classArr){
					that.classArr.forEach(function(v, i) {
						v.day = '' + v.day
						v.day = v.day.substring(0, 4) + '年' + v.day.substring(4, 6) + '月' + v.day.substring(6, 8) + '日'
					})
					that.classArr.reverse()
						
					}else{
						that.classArr=[]
					}
				})
			},
			transSubject(coursename){
				switch (coursename){
					case '语文':
						return 'chinese';
					case '数学':
						return 'math';
					case '英语':
						return 'english';
					case '物理':
						return 'physics';
					case '化学':
						return 'chemistry';
					case '生物':
						return 'biology';
					case '政治':
						return 'politics';
					case '历史':
						return 'history';
					case '地理':
						return 'geography';
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped>
	iframe {
		width: 100%;
		height: 700px;
		frameborder: 0;
		border: none;
	}
	
	.container {
		cursor: default;
	}
	
	.container>.nav {
		background: #F5FAFC;
		height: 48px;
		line-height: 48px;
		padding-left: 40px;
	}
	
	.container>.nav>span {
		font-size: 16px;
		font-weight: bold;
		padding-left: 30px;
	}
	.container>.nav>span>i{
		font-size: 18px;
	}
	.el-dropdown-link>span{
		color: black;
		font-size: 16px;
		font-weight: bold;
	}
	.container>.nav>span:nth-last-of-type(1){
		padding-left: 15px;
		padding-top: 5px;
		padding-right: 5px;
		padding-bottom: 5px;
		font-size: 18px;
	}
	.container>.content{
		padding-bottom: 40px;
	}
	.container>.content>p{
		text-align: center;
		line-height: 120px;
		letter-spacing: 2px;
	}
	.content>.outBox>p {
		font-size: 14px;
		color: #999999;
		margin-top: 24px;
		margin-bottom: 16px;
		padding-left: 40px;
		color: black;
	}
	
	.content>.outBox>.inBox {
		display: inline-block;
		width: 206px;
		height: 154.5px;
		margin-right: 32px;
		color: white;
		background-color: #207CA8;
		font-size: 14px;
		text-align: center;
		margin-top: 16px;
	}
	.content>.outBox>.inBox:hover{
		opacity: 0.8;
		cursor: pointer;
	}
	.content>.outBox>.inBox.chinese{
		background-color: #207CA8;
	}
	.content>.outBox>.inBox.math{
		background-color: #bf360c;
	}
	.content>.outBox>.inBox.english{
		background-color: #4527a0;
	}
	.content>.outBox>.inBox.physics{
		background-color: #ad1457;
	}
	.content>.outBox>.inBox.chemistry{
		background-color: #e65100;
	}
	.content>.outBox>.inBox.biology{
		background-color: #2e7d32;
	}
	.content>.outBox>.inBox.politics{
		background-color: #D84315;
	}
	.content>.outBox>.inBox.history{
		background-color: #00838f;
	}
	.content>.outBox>.inBox.geography{
		background-color: #00695c;
	}
	.content>.outBox>.inBox:nth-of-type(4n-3) {
		margin-left: 40px;
	}
	
	.content>.outBox>.inBox>div._top {
		height: 32px;
		width: 100%;
		background-color: rgba(255, 255, 255, 0.2);
		line-height: 32px;
	}
	
	.content>.outBox>.inBox>div._middle {
		height: 98.5px;
		width: 100%;
		font-size: 16px;
		line-height: 98.5px;
	}
	.content>.outBox>.inBox>div._middle>p{
	}
	.content>.outBox>.inBox>div._middle>p>i{
		font-size: 18px;
		margin-right: 8px;
	}
	.content>.outBox>.inBox>div._middle>p{
		font-size: 12px;
	}
	.content>.outBox>.inBox>div._middle>p:nth-of-type(1){
		font-size: 16px;
	}
	.content>.outBox>.inBox>div._middle>p.twoP:nth-of-type(1){
		padding-top: 30px;
		line-height: 20px;
	}
	.content>.outBox>.inBox>div._middle>p.twoP>i{
		margin-right: 9px;
	}
	.content>.outBox>.inBox>div._middle>p.twoP:nth-of-type(2){
		line-height: 20px;
		padding-top: 10px;
	}
	.content>.outBox>.inBox>div._bottom {
		height: 24px;
		width: 100%;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.2);
		line-height: 24px;
		position: relative;
		overflow: hidden;
	}
	
	.content>.outBox>.inBox>div._bottom:before {
		content: '';
		height: 24px;
		width: 24px;
		transform: rotate(45deg);
		display: inline-block;
		background: white;
		position: absolute;
		right: -12px;
		top: 13px;
		z-index: 2;
	}
	.content>.outBox>.inBox>div._bottom:after {
		content: '';
		height: 24px;
		width: 24px;
		/*transform: rotate(45deg);*/
		display: inline-block;
		background: rgba(0, 0, 0, 0.3);;
		position: absolute;
		right: -5px;
		top: 5px;
	}
</style>